<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import axiosUtil from "../../axios-util/axios-util.ts";
import {ElMessage} from "element-plus";
import { ElLoading } from 'element-plus'
import utils from '../../utils/utils'

// 主题控制
const theme = utils.getTheme()

interface TableData {
  id: number
  rank: number
  keyword: string
  influencer: string
  followers: number
  totalLikes: number
  uid: string
}

const tableData = ref<TableData[]>([])
const searchQuery = ref('')
const activePlatform = ref('douyin') // 默认显示抖音

// 新增扫码授权相关变量
const scanDialogVisible = ref(false)
const selectedRegion = ref('')
const regionOptions = ref([])

const handleOperation = (row: TableData) => {
  window.open(`https://www.douyin.com/user/`+row.uid)
}

const handlePlatformChange = (platform: string) => {
  activePlatform.value = platform
  // 这里可以添加切换平台时的数据加载逻辑
}

const handleScanAuth = async () => {
  scanDialogVisible.value = true
  regionOptions.value = []
  axiosUtil.post('api/Trafficdata/city', {}).then(response => {
    response.data.forEach(item => {
      regionOptions.value.push({
        label: item.prov + '-' + item.city,
        value: item.code
      })
    })
  })
}

const getQrcode = () => {
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.3)'
  })
  axiosUtil.post('api/Trafficdata/get_qrcode_dy_cookie', {
    agent_ip: selectedRegion.value,
    tuiguang_user_id: localStorage.getItem("id")
  }).then(response => {
    loadingInstance.close()
    if(response.data.error_code === 1){
      ElMessage.error(response.data.message)
    }
  }).catch(() => {
    loadingInstance.close()
    ElMessage.error('请求异常')
  })
}

const searchContext = () => {
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.3)'
  })
  if(searchQuery.value){
    axiosUtil.post('api/Trafficdata/sreach_list', {
      lx: 'user',
      search_keywords: searchQuery.value,
      type: '1'
    }).then(response => {
      loadingInstance.close()
      if(response.data.code === 1){
        const resData = JSON.parse(response.data.data)
        tableData.value = JSON.parse(resData.data)
        tableData.value.forEach((item, index)=> {
          item.keyword = searchQuery.value
          item.rank = index +1
        })
        console.log(tableData.value)
      }else{
        ElMessage.error('请求失败')
      }
    }).catch(() => {
      loadingInstance.close()
      ElMessage.error('请求异常')
    })
  }else {
    loadingInstance.close()
    ElMessage.error('请输入关键词进行搜索')
  }
}
</script>

<template>
  <el-card class="content-container" :body-style="{ padding: '20px' }">
    <div class="layout-container">
      <!-- 上区域：搜索区域 -->
      <div class="search-section">
        <div class="search-group">
          <el-input
            v-model="searchQuery"
            placeholder="搜索"
            class="search-box"
          />
          <el-button type="primary" @click="searchContext">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
        </div>
      </div>
      
      <!-- 下区域：表格区域 -->
      <div class="table-section">
        <div class="table-header">
          <div class="header-left">
            <el-radio-group v-model="activePlatform" @change="handlePlatformChange" class="platform-group">
              <el-radio-button label="douyin">抖音</el-radio-button>
            </el-radio-group>
          </div>
          <div class="header-right">
            <!-- <el-button 
              v-if="activePlatform === 'douyin'"
              type="text" 
              class="scan-auth-btn"
              @click="handleScanAuth"
            >
              扫码授权
            </el-button> -->
          </div>
        </div>
        
        <el-table :data="tableData"  class="transparent-table" style="width: 100%">
          <el-table-column prop="rank" label="排名" width="80" />
          <el-table-column prop="keyword" label="关键词" />
          <el-table-column prop="nickname" label="达人" />
          <el-table-column prop="follower_count" label="粉丝数" />
          <el-table-column prop="total_favorite" label="获赞总数" />
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="handleOperation(scope.row)"
              >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-card>

  <!-- 扫码授权弹窗 -->
  <el-dialog
    v-model="scanDialogVisible"
    title="扫码授权"
    width="400px"
    :close-on-click-modal="false"
  >
    <div style="margin-bottom: 16px;">
      <span>选择登录地区：</span>
      <el-select v-model="selectedRegion" placeholder="请选择地区" style="width: 220px;" filterable>
        <el-option
          v-for="item in regionOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div style="width: 100%; height: 260px; background: #d8d8d8; border-radius: 6px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center;">
      <!-- 这里放二维码图片，暂时用灰色占位 -->
    </div>
    <div style="text-align: center;">
      <el-button type="primary" @click="getQrcode">获取二维码</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.content-container {
  border-radius: 8px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.layout-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-section {
  height: 10%;
  display: flex;
  align-items: center;
  padding: 10px 0;
  width: 100%;
}

.search-group {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.search-group .el-input {
  margin-right: 0;
  flex: 1;
}

.search-group .el-input :deep(.el-input__inner) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.search-group .el-input :deep(.el-input__inner::placeholder) {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.6)"');
}

.search-group .el-input :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  box-shadow: none;
  height: 44px;
}

.search-group .el-input :deep(.el-input__wrapper:hover) {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #7c4dff;
}

.search-group .el-input :deep(.el-input__wrapper.is-focus) {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #7c4dff;
  box-shadow: none;
}

.search-group .el-button {
  border-radius: 8px;
  background-color: skyblue;
  border-color: skyblue;
  height: 44px;
  padding: 0 24px;
  font-size: 16px;
  color: #fff;
}

.search-group .el-button:hover {
  background-color: skyblue;
  border-color: skyblue;
  color: #fff;
}

.search-box {
  width: 100%;
}

.table-section {
  height: 90%;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-right {
  display: flex;
  align-items: center;
}

.platform-group {
  display: inline-flex;
  background-color: transparent;
  border-radius: 8px;
  gap: 8px;
  margin-top: 16px;
}

.platform-group :deep(.el-radio-button) {
  margin: 0;
}

.platform-group :deep(.el-radio-button__inner) {
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 8px 24px;
  font-size: 14px;
  transition: all 0.3s ease;
  height: 32px;
  line-height: 16px;
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.platform-group :deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-radius: 6px;
}

.platform-group :deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 6px;
}

.platform-group :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  color: #fff;
  background-color: #7c4dff;
  border-color: #7c4dff;
  box-shadow: none;
}

.platform-group :deep(.el-radio-button__inner:hover) {
  color: #7c4dff;
  background-color: rgba(124, 77, 255, 0.1);
  border-color: #7c4dff;
}

.platform-group :deep(.el-radio-button__original-radio:disabled + .el-radio-button__inner) {
  background-color: transparent;
  border-color: #dcdfe6;
  color: #c0c4cc;
}

.platform-group :deep(.el-radio-button__original-radio:disabled:checked + .el-radio-button__inner) {
  background-color: #f5f7fa;
  border-color: #dcdfe6;
  color: #c0c4cc;
}

.scan-auth-btn {
  color: skyblue;
  font-size: 14px;
  padding: 0 8px;
}

.scan-auth-btn:hover {
  color: skyblue;
}

.scan-auth-btn:deep(.el-button__text) {
  color: v-bind('theme === "light" ? "skyblue" : "skyblue"');
}

:deep(.el-card__body) {
  padding: 20px;
  height: 100%;
}

:deep(.el-table) {
  background-color: transparent;
  backdrop-filter: blur(10px);
}

:deep(.el-table th) {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #dcdfe6;
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-weight: 500;
  padding: 12px 0;
}

:deep(.el-table th.el-table__cell) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-table__header) {
  background-color: transparent;
}

:deep(.el-table__header-wrapper) {
  background-color: transparent;
}

:deep(.el-table__header tr) {
  background-color: transparent;
}

:deep(.el-table__header th.el-table__cell.is-leaf) {
  border-bottom: 1px solid #dcdfe6;
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-table td) {
  background-color: transparent;
  border-bottom: 1px solid #dcdfe6;
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-button--primary) {
  background-color: #7c4dff;
  border-color: #7c4dff;
}

:deep(.el-button--primary:hover) {
  background-color: #6c3fff;
  border-color: #6c3fff;
}

.transparent-table {
  background-color: transparent !important;
}

:deep(.transparent-table .el-table__header),
:deep(.transparent-table .el-table__body),
:deep(.transparent-table .el-table__footer),
:deep(.transparent-table .el-table__cell),
:deep(.transparent-table .el-table__row),
:deep(.transparent-table th),
:deep(.transparent-table td) {
  background-color: transparent !important;
}

:deep(.el-dialog__title) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

:deep(.el-dialog__body) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

:deep(.el-select .el-input__inner) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

:deep(.el-select .el-input__inner::placeholder) {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.6)"');
}
</style>